import React from 'react';
import { DataState } from '../../types';

interface DataSettingsProps {
  data: DataState;
  onUpdateSettings: (updates: Partial<DataState>) => void;
  isLoading: boolean;
}

const DataSettings: React.FC<DataSettingsProps> = ({ 
  data, 
  onUpdateSettings,
  isLoading 
}) => {
  const handleColumnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onUpdateSettings({ selectedColumn: e.target.value });
  };

  const handleSequenceLengthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value);
    if (!isNaN(value) && value > 0) {
      onUpdateSettings({ sequenceLength: value });
    }
  };

  const handleRowRangeChange = (type: 'start' | 'end', e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value);
    if (!isNaN(value) && value > 0) {
      if (type === 'start') {
        onUpdateSettings({ startRow: value });
      } else {
        onUpdateSettings({ endRow: value });
      }
    }
  };

  return (
    <div className="space-y-4 bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
      <h3 className="text-lg font-medium text-gray-800">Data Settings</h3>
      
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="column" className="block text-sm font-medium text-gray-700 mb-1">
            Data Column
          </label>
          <select
            id="column"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={data.selectedColumn}
            onChange={handleColumnChange}
            disabled={!data.columnNames.length || isLoading}
          >
            {data.columnNames.length === 0 ? (
              <option value="">No columns available</option>
            ) : (
              data.columnNames.map((col) => (
                <option key={col} value={col}>{col}</option>
              ))
            )}
          </select>
        </div>
        
        <div>
          <label htmlFor="sequenceLength" className="block text-sm font-medium text-gray-700 mb-1">
            Sequence Length
          </label>
          <input
            id="sequenceLength"
            type="number"
            min="1"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={data.sequenceLength}
            onChange={handleSequenceLengthChange}
            disabled={isLoading}
          />
        </div>

        <div>
          <label htmlFor="startRow" className="block text-sm font-medium text-gray-700 mb-1">
            Start Row
          </label>
          <input
            id="startRow"
            type="number"
            min="1"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={data.startRow}
            onChange={(e) => handleRowRangeChange('start', e)}
            disabled={!data.data || isLoading}
          />
        </div>
        
        <div>
          <label htmlFor="endRow" className="block text-sm font-medium text-gray-700 mb-1">
            End Row
          </label>
          <input
            id="endRow"
            type="number"
            min={data.startRow + 1}
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={data.endRow}
            onChange={(e) => handleRowRangeChange('end', e)}
            disabled={!data.data || isLoading}
          />
        </div>
      </div>
    </div>
  );
};

export default DataSettings;